require('../../assets/css/index.less');
require('./play.less')
//引入axios
const request = require('../../xios/axios')
// 引入inconfont
require('./iconfont/iconfont.css')
window.onload = () => {
    //   获取doum
    let vieo = document.querySelector('#vieo')
    let tim_sp1 = document.querySelector('#tim_sp1')
    let tim_sp2 = document.querySelector('#tim_sp2')
    let tim_sp3 = document.querySelector('#tim_sp3')
    let shipin1 = document.querySelector('#shipin1')
    let p_min2 = document.querySelector('.p_min2')
    let video2 = document.querySelectorAll('.video2')
    const API = 'http://fitness.h5.itsource.cn:3701'
    // 获取本地数据
    const fragments = JSON.parse(localStorage.getItem('fragments'))
    console.log(fragments);
    vieo.src = API + fragments[0].videoUrl
    shipin1.src = API + fragments[0].videoUrl
    console.log(API + fragments[0].videoUrl);
    // 设置变量
    let index = 0 //初始化变量索引
    let length = fragments.length  //获取视屏总个数
    // 保存总时间
    let arrman=[]
    console.log(arrman);
    //保存当前时间
    let time=null
    //  console.log(time);
    //播放函数
    function play() {
        // 给视频src赋值
        vieo.src = API + fragments[index].videoUrl
        // 给视频src赋值
        shipin1.src = API + fragments[index].videoUrl
        // 信息赋值
        tim_sp1.textContent = index + 1
        tim_sp2.textContent = length
        tim_sp3.textContent = fragments[index].title
        p_min2.textContent = fragments[index].title

    }
    play()
    let dian = document.querySelector('#dian')
    // 下一曲
    dian.addEventListener('click', function () {
        if (index < length-1) {
            index++
            console.log('1:', index);
            kai.style.display = 'none'
            zhanting.style.display = 'block'
            //蒙城视屏表面视屏同时播放
            play()
            video2.forEach(function (v) {
                v.play()
            })
            // 记录下一曲时长
            arrman.push(time)
            console.log( arrman);
            // console.log(vieo.src);
         
            // console.log(vieo.src);

        }else {
            alert('已经到头啦')
        }

    })
    //   遍历
    // shipin1.addEventListener('timeupdate',function(){
    //     console.log(this.currentTime);
    // })
    //  上一曲
    let shang = document.querySelector('#shang')
    shang.addEventListener('click', () => {

        if (index > 0) {
            console.log('2:', index);
            index--
            kai.style.display = 'none'
            zhanting.style.display = 'block'
            play()
            video2.forEach(function (v) {
                v.play()
            })
            // 记录上一曲时长
            arrman.push(time)
            console.log(arrman);
        } else {
            console.log('3:', index);
            alert('已结到头啦')
        }

    })
    // 暂停
    //   遍历
    // shipin1.addEventListener('timeupdate',function(){
    //     console.log(this.currentTime);
    // })
    let mack = document.querySelector('.mack')
    let zhanting = document.querySelector('#zhanting')
    let kai = document.querySelector('#kai')
    zhanting.addEventListener('click', function () {
        console.log(1);
        zhanting.style.display = 'none'
        kai.style.display = 'block'
        mack.style = `
        opacity:1;
        z-index:10;
        `
        video2.forEach(function (v) {
            v.pause()
        })
        
    })
    //开始
    kai.addEventListener('click', function () {
        kai.style.display = 'none'
        zhanting.style.display = 'block'
        video2.forEach(function (v) {
            v.play()
        })
    })


    // 进度条事件
let tiao = document.querySelector('.tiao')
    vieo.addEventListener('timeupdate', () => {
        // 获取当前时间百分比
        const percent = vieo.currentTime / vieo.duration
        time= vieo.currentTime 
        // console.log(time);
        //  console.log(percent);
        //    计算进度条的长度
        tiao.style.width = percent * 100 + '%'
    })
    vieo.addEventListener('ended', () => {
        dian.click()
    })
//   点击继续
let juxu=document.querySelector('.juxu')
juxu.addEventListener('click',function(){
    zhanting.style.display = 'block'
    kai.style.display = 'none'
    mack.style = `
    opacity:0;
    z-index:-10;
    `
    video2.forEach(function (v) {
      
        v.play()
    })
})
//点击结束
let mack_p2= document.querySelector('#mack_p2')
mack_p2.addEventListener('click',function(){
    // 保存结束时的视屏长度
    time= vieo.currentTime 
  arrman.push(time)
 let man= arrman.reduce((total,cur)=>{
         return total+cur
    })
    // console.log(man);
    //  JSON.parse(localStorage.getItem('fragments',man))
    //  console.log( JSON.parse(localStorage.getItem('fragments',man)));
    request.post('/api/exercise/save',{
        type:2,
        duration: man,
        calorie:man*1000,
    }).then(ser=>{
        let {errno,data}=ser.data
        if(errno===0){
            location.href='./course.html'
        }
    })
})
}
